<template>
  <div>
    <!-- <div style="width: 45%;height:200px;float:left;">
      1111
    </div>
    <div style="width: 45%;height:200px;float:left;left:100px">
      2222</div> -->
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="trainSearch" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="trainSearch.userName" placeholder="输入学员姓名"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input size="small" v-model="trainSearch.roleId" placeholder="职位"></el-input>
      </el-form-item>

      <template>
        <el-select v-model="role" placeholder="请选择" @change="roleChange()">
          <el-option v-for="(item,index) in roles" :key="index" :value="item.role">
          </el-option>
        </el-select>
      </template>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>
    <div v-for="(item,index) in user_schedule" :key="index"
      style="width: 45%;height:200px;float:left;left:100px ;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">

      <!-- <div style="width: 45%;height:200px;float:left;left:100px ;">
            <h3>{{}}</h3>
            <h3>2</h3>
            <h3>3</h3>
            <h3>4</h3>
          </div> -->
      <el-card class="box-card" style="width: 45%;height:200px;float:left;left:100px ;border:0px">
        <div slot="header" class="clearfix">
          <span>{{item.name}}</span>
        </div>
        <div>{{item.role}}</div>
        <div>{{item.departmentName}}</div>
      </el-card>
      <div style="width: 45%;height:200px;float:left;left:100px ;">
        <el-progress type="circle" :percentage="item.schedule" :color="colors" :stroke-width="18">
        </el-progress>
        <!-- <template slot-scope="scope"> -->

        <!-- <el-button type="primary"> -->

        <!-- <router-link :to="{path:'/userTrain/userTrainMessage/'+ item.id}">查看详情
        </router-link> -->
        <!-- <button @click="goMessage(item.id)"></button> -->
        <el-button type="success" @click="goMessage(item.id)">查看详情</el-button>
        <!-- </el-button> -->
        <!-- </template> -->
      </div>
    </div>

  </div>
</template>



<script>
  import userTrainApi from '@/api/user_train'
  import roleApi from '@/api/role'
  export default {
    data() {
      return {
        trainSearch: {
          roleId: 0,
          trainId: 0,
          userName: '',
        },
        user_schedule: [], // 记录用户的状态
        colors: [{
            color: '#f56c6c',
            percentage: 20
          },
          {
            color: '#e6a23c',
            percentage: 40
          },
          {
            color: '#5cb87a',
            percentage: 60
          },
          {
            color: '#1989fa',
            percentage: 80
          },
          {
            color: '#6f7ad3',
            percentage: 100
          },
        ],
        formInline: {
          page: 1,
          limit: 10,
          varLable: '',
          varName: '',
        },
        role: '',
        roles: [],
      }
    },
    props: ['trainIdSon', 'value1'],
    watch: {
      trainIdSon: {
        handler(newValue, oldValue) {
          this.trainSearch.trainId = newValue
          this.findTrainUserScore()
          this.getAllRole()
        },
      },
    },
    methods: {
      //通过培训的id 查询学员的学习成绩分数
      findTrainUserScore() {
        // /trainSearch, currentPage, pageSize
        console.log('启动')
        userTrainApi
          .findTrainUserScore(
            this.trainSearch,
            1,
            4
            // this.pageparm.currentPage,
            // this.pageparm.pageSize
          )
          .then((response) => {
            console.log(response)
            this.user_schedule = response.data.list
          })
          .catch()
      },
      //获取所有角色
      getAllRole() {
        roleApi
          .findAllRole()
          .then((response) => {
            this.roles = response.data
            console.log('所有角色', this.roles)
          })
          .catch()
      },
      search() {
        this.findTrainUserScore()
      },

      //获得当前选择的角色
      roleChange(id) {
        for (const key in this.roles) {
          if (this.roles[key].role == this.role) {
            this.trainSearch.roleId = this.roles[key].id
          }
        }
      },
      show(id) {
        console.log(id)
      },
      goMessage(id) {
        console.log(id);
        this.$router.push({
          path: '/userTrain/userTrainMessage',
          query: {
            "userid": id
          }
        })
      }
    },
  }

</script>

<style>
</style>
